<template>
<div class="index">
  <Banner v-if="topBannerList!=null" :topBannerList="topBannerList" />
  <Hot />
  <Categorys />
  <section class="index-tabs">
    <div class="index-tabs-inner index-tabs-wrap hidden-sm-and-down">
      <span class="big-button" :class="{'active':tabIndex==1}" @click="tabIndex=1">
        <i class="el-icon-star-off"></i>首页推荐
      </span>
      <span class="big-button" :class="{'active':tabIndex==2}" @click="tabIndex=2">
        <i class="el-icon-files"></i>新品推荐
      </span>
      <span class="big-button" :class="{'active':tabIndex==3}" @click="tabIndex=3" v-if="isLogin">
        <i class="el-icon-discover"></i>猜你喜欢
      </span>
      <!-- <span class="big-button" :class="{'active':tabIndex==4}" @click="tabIndex=4">
          <i class="el-icon-magic-stick"></i>设计新秀
        </span> -->
      <span class="big-button" :class="{'active':tabIndex==5}" @click="tabIndex=5">
        <i class="el-icon-data-analysis"></i>TOP排行榜
      </span>
    </div>

    <!-- <el-button @click="getHotImageList(topHotParmas)">测试获取数据</el-button> -->
    <div class="index-tabs-inner">
      <keep-alive>
        <component :is="topicsComponent"></component>
      </keep-alive>
      <!-- <HomeRecommend v-show="tabIndex==1" :homeList="homeList" />
        <NewDesign v-show="tabIndex==2" :newList="newList" />
        <yourLike v-show="tabIndex==3" v-if="isLogin" :guessYourLikeList="guessYourLikeList" />
        <Rookie v-show="tabIndex==4" />
        <Top v-show="tabIndex==5" :TopList="TopList" :TopHotList="TopHotList" /> -->
    </div>
  </section>
  <Statistics />
  <Ad v-if="bottomBannerList!=null" :bottomBannerList="bottomBannerList" />
</div>
</template>

<script>
import {
  mapState,
  mapMutations
} from "vuex";
import Banner from "@/components/Banner.vue";
import Hot from "@/components/Hot.vue";
import Categorys from "@/components/Categorys.vue";
import HomeRecommend from "@/components/HomeRecommend.vue";
import Statistics from "@/components/Statistics.vue";
import Ad from "@/components/Ad.vue";
export default {
  name: "Index",
  layout: "main",
  components: {
    Banner,
    Hot,
    Categorys,
    HomeRecommend, //首页推荐
    NewDesign: () => import('@/components/NewDesign.vue'), //新平推荐
    yourLike: () => import('@/components/yourLike.vue'), //猜你喜欢
    Rookie: () => import('@/components/Rookie.vue'), //设计新秀
    Top: () => import('@/components/Top.vue'), //Top排行
    Statistics,
    Ad
  },
  watch: {
    'tabIndex': function(v) {
      if (v == 1) {
        this.topicsComponent = 'HomeRecommend'
      } else if (v == 2) {
        this.topicsComponent = 'NewDesign'
      } else if (v == 3) {
        this.topicsComponent = 'yourLike'
      } else if (v == 4) {
        this.topicsComponent = 'Rookie'
      } else {
        this.topicsComponent = 'Top'
      }
    }
  },
  data() {
    return {
      topicsComponent: 'HomeRecommend',
      TopHotList: [], //热度排行
      TopList: [], //Top排行专题
      guessYourLikeList: [], //猜你喜欢专题
      userid: "", //用户id
      nickname: "", //用户名
      // isLogin: false, //是否登录
      tabIndex: 1,
      topBannerList: null,
      bottomBannerList: null
    };
  },
  computed: {
    ...mapState("user", {
      isLogin: state => state.isLogin
    })
  },
  mounted() {
    this.getBannerList();
    // if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
    //   var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
    //   this.$store.commit("user/SET_isLogin", true);
    //   this.nickname = data.name;
    //   this.userid = data.userid;
    // }
  },
  methods: {
    getBannerList() {
      this.$axios.get("/api/base/getBannerList").then(res => {
          var topBanners = [];
          var bottomBanners = []
          for (var obj of res.data) {
            if (obj.position == 1) {
              //顶部
              topBanners.push(obj);
            } else if (obj.position == 2) {
              //底部
              bottomBanners.push(obj)
            }
          }
          //顶部bannner
          this.topBannerList = topBanners;
          //底部banner
          this.bottomBannerList = bottomBanners;
        })
        .catch(err => {
          console.log(err);
        });
    },


  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.index {
    min-height: 600px;
    .index-tabs {
        padding: 0 16px;
        .index-tabs-inner {
            max-width: 1380px;
            margin: 0 auto;
            &.index-tabs-wrap {
                margin-bottom: 24px;
                text-align: center;
            }
            .big-button {
                position: relative;
                padding: 12px 32px;
                cursor: pointer;
                background-color: @white;
                margin: 0 10px;
                display: inline-block;
                vertical-align: middle;
                transition: all 0.1s;
                text-align: center;
                i {
                    display: block;
                    margin: 0 auto 10px;
                    border-bottom: 3px solid @color-text-primary;
                    transition: all 0.15s;
                    font-size: 34px;
                    padding-bottom: 10px;
                    opacity: 0.5;
                }
                &.active {
                    color: @color-primary;
                    i {
                        transform: translateY(2px);
                        border-bottom-color: @color-primary;
                        opacity: 1;
                    }
                    &:hover {

                        i {
                            transform: translateY(2px);
                        }
                    }
                }
                &:hover {
                    i {
                        transform: translateY(-5px);
                    }
                }
                &:active {

                    i {
                        transform: translateY(3px);
                    }
                }
            }
        }
    }
}
</style>
